<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      /*左上元素的样式*/
      #t_l_div {
        width: 611px;
        height: 376px;
        background-color: #e8e8e8;
        float: left;
      }
      /*设置最外层的大的div 居中*/
      body > div {
        width: 1000px;
        margin: 0 auto; /*居中*/
      }
      /*设置右上div的样式*/
      #t_r_div {
        float: right;
        width: 375px;
        height: 376px;
        background-color: #e8e8e8;
      }
      /*设置表示两行的div*/
      body > div > div {
        /*避免出现浮动完之后 高度识别为0 的问题，
      因为表示行的div里面的所有div都浮动了*/
        overflow: hidden;

        margin-bottom: 10px;
      }
      /*设置左下div的样式*/
      #b_l_div {
        width: 366px;
        height: 233px;
        background-color: #e8e8e8;
        float: left;
      }
      /*设置右下div的样式,装着3个小的的div*/
      #b_r_div {
        float: right;
      }

      /*设置三个小的div的样式*/
      #b_r_div > div {
        width: 198px;
        height: 233px;
        background-color: #e8e8e8;
        float: left;
        margin-left: 10px; /*设置间距*/
      }

      body {
        font: 12px "simhei", Arial, Helvetica, sans-serif;
        color: #666;
      }

      #t_l_div > div {
        width: 245px;
        height: 232px;
        margin: 68px 0 0 36px;
      }

      .title_p {
        font-size: 32px;
        color: #333;
        margin-bottom: 12px;
      }

      .price_p {
        font-size: 24px;
        font-weight: bold;
        color: #0aa1ed;
        margin-bottom: 12px;
      }

      a {
        background-color: #0aa1ed;
        width: 132px;
        height: 40px;
        display: block;
        text-align: center;
        line-height: 40px;
        color: white;
        font-size: 20px;
        border-radius: 3px;
        text-decoration: none;
      }
      #t_l_div {
        position: relative;
      }
      #t_l_div > img {
        width: 318px;
        height: 319px;
        position: absolute;
        right: 30px;
        top: 30px;
        /* 设置动画持续时间 s代表秒 */
        transition-duration: 1s;
      }
      #t_l_div > img:hover {
        /* 设置鼠标悬停时缩放1.1倍 */
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <div>
      <div id="t_div">
        <div id="t_l_div">
          <div>
            <p class="title_p">灵越 燃7000系列</p>
            <p>
              酷睿双核i5处理器|256GB SSD| 8GB内存<br />
              英特尔HD显卡620含共享显卡内存
            </p>
            <p class="price_p">￥4999.00</p>
            <a href="#">查看详情</a>
          </div>
          <img
            src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png"
            alt=""
          />
        </div>
        <div id="t_r_div"></div>
      </div>
      <div id="b_div">
        <div id="b_l_div"></div>
        <div id="b_r_div">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>
